<template>
    <view>
        <view class="qrcode">
            <view
                v-for="(row, rowI) in modules"
                :key="rowI"
                style="display: flex; flex-direction: row"
            >
                <view v-for="(col, colI) in row" :key="colI">
                    <view
                        v-if="col.isBlack"
                        style="width: 10px; height: 10px; background-color: black"
                    >
                        <!-- 黑色码点 -->
                    </view>
                    <view v-else style="width: 10px; height: 10px; background-color: white">
                        <!-- 白色码点 -->
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import UQRCode from '@uqrcode/js'
import { ref, defineProps } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

interface IProps {
    data: string
}
const props = defineProps<IProps>()

const modules = ref([])
onLoad(() => {
    const qr = new UQRCode()
    qr.data = props.data
    qr.make()
    modules.value = qr.modules
})
</script>

<style scoped lang="scss"></style>
